<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="770px"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <div class="tab-wrap d-flex justify-content-between cursor-pointer">
      <div
        v-for="(item, index) in tabs"
        :key="index"
        :class="{
          tab_item_one: item.value === 'one',
          tab_item_two: item.value === 'two',
          tab_item_three: item.value === 'three',
          tab_item_active__is: item.id <= tabIndex
        }"
      >
        <i class="el-icon-success size-16"></i>
        {{ item.label }}
      </div>
    </div>
    <div v-if="tabIndex == 1" class="step-section">
      <div class="sections">
        <div class="sections__title">客户名称:</div>
        <div class="content">
          <flexbox class="file-select">
            <el-input
              v-model="templateForm.customerName"
              placeholder="请输入模板名称"
              :disabled="true"
            />
          </flexbox>
        </div>
      </div>
      <div class="sections">
        <div class="sections__title">学员手机号:</div>
        <div class="content">
          <flexbox class="file-select">
            <el-input
              v-model="templateForm.signPhone"
              placeholder="请输入学员手机号"
              maxLength="11"
            />
          </flexbox>
        </div>
      </div>
      <div class="sections">
        <div class="sections__title">学员身份证号:</div>
        <div class="content">
          <flexbox class="file-select">
            <el-input
              v-model="templateForm.idCard"
              placeholder="请输入学员身份证号"
              maxLength="18"
            />
          </flexbox>
        </div>
      </div>
      <div class="sections">
        <div class="sections__title">学员姓名:</div>
        <div class="content">
          <flexbox class="file-select">
            <el-input
              v-model="templateForm.signUserName"
              placeholder="请输入学员真实姓名"
            />
          </flexbox>
          <div class="step-section__tips">
            如果签署不是学员真实姓名,合同则无效
          </div>
        </div>
      </div>
    </div>

    <div v-if="tabIndex == 2" class="step-section">
      <div class="sections">
        <div class="sections__title">选择协议模板</div>
        <div class="content">
          <flexbox class="file-select">
            <el-select
              v-model="templateForm.templateId"
              placeholder="请选择"
              style="width: 100%;"
              @change="templateChange"
            >
              <el-option
                v-for="(item, index) in systemList"
                :key="index"
                :label="item.templateName"
                :value="item.templateId"
              />
            </el-select>
          </flexbox>
        </div>
      </div>
      <div class="size-14 color-02 font-bold" style="margin: 20px 0 -10px 0;">
        配置协议内容
      </div>
      <div
        class="sections"
        v-for="(objValue, key, index) in templateForm.params"
        :key="index"
      >
        <div class="sections__title">{{ key }}:</div>
        <div class="content">
          <flexbox class="file-select select-item">
            <el-input
              v-if="inpArr[index] == 1"
              maxLength="50"
              v-model="templateForm.params[key]"
              placeholder="请输入内容"
              @input="paramsChange"
            ></el-input>

            <el-date-picker
              v-if="inpArr[index] == 5"
              v-model="templateForm.params[key]"
              type="date"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd"
              @change="paramsChange"
            >
            </el-date-picker>

            <el-input
              v-if="inpArr[index] == 8"
              type="textarea"
              maxLength="50"
              :rows="2"
              placeholder="请输入内容"
              v-model="templateForm.params[key]"
              @input="paramsChange"
            >
            </el-input>
          </flexbox>
        </div>
      </div>
    </div>

    <div v-if="tabIndex == 3" class="step-section">
      <div class="sections">
        <div class="sections__title">协议签署:</div>
        <div class="content">
          <flexbox class="file-select select-item">
            <el-input v-model="templateForm.templateName" :disabled="true" />
          </flexbox>
        </div>
      </div>
      <div class="sections">
        <div class="sections__title">签署学员姓名:</div>
        <div class="content">
          <flexbox class="file-select select-item">
            <el-input v-model="templateForm.signUserName" :disabled="true" />
          </flexbox>
        </div>
      </div>
      <div class="sections">
        <div class="sections__title">签署手机号:</div>
        <div class="content">
          <flexbox class="file-select select-item">
            <el-input v-model="templateForm.signPhone" :disabled="true" />
          </flexbox>
        </div>
      </div>
      <div class="sections" v-for="(item, index) in inpList" :key="index">
        <div class="sections__title">{{ item.signerKey }}</div>
        <div class="content">
          <flexbox class="file-select select-item">
            <el-input v-model="item.enterpriseName" :disabled="true" />
          </flexbox>
        </div>
      </div>
      <div class="sections">
        <div class="sections__title">选择签署方式</div>
        <div class="content">
          <flexbox class="file-select">
            <el-select
              v-model="templateForm.signType"
              placeholder="请选择"
              style="width: 100%;"
            >
              <el-option
                v-for="(item, index) in signTypeList"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </flexbox>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="tabClick('down')" v-if="tabIndex != 1"
        >返回上一步</el-button
      >
      <el-button type="primary" @click="tabClick('up')">{{
        tabIndex == 3 ? "复制签署链接" : "确认下一步"
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { mapGetters } from "vuex";
import { debounce } from 'throttle-debounce'
import {
  addSign,
  getTemplateAllList,
  getTemplateInfo,
  personAuth
} from "@/api/admin/agreement";
import { copyText } from "@/utils";
export default {
  data() {
    return {
      dialogVisible: false,
      addNameVisible: true, // 配置签署方添加
      addSystemVisible: true, // 配置字段添加
      tabIndex: 1,
      fileId: null, // 文件id
      templateForm: {
        // 新增模板
        templateName: "", // 模板名称
        templateId: "", // 模板ID
        customerType: "学员", // 客户类型
        customerId: null, // 客户id
        signUserName: null, // 签署学员姓名
        customerName: null, // 客户名称
        signPhone: null, // 签署学员手机号
        idCard: null, // 签署学员身份证号
        params: {}
      },
      tabs: [
        {
          id: 1,
          label: "完善客户信息",
          value: "one"
        },
        {
          id: 2,
          label: "选择协议模板",
          value: "two"
        },
        {
          id: 3,
          label: "发起协议签署",
          value: "three"
        }
      ],
      inpList: [
        {
          enterpriseName: "",
          subjectId: 1,
          signerKey: ""
        }
      ], // 签署方列表
      systemList: [], // 模板列表
      signTypeList: [
        // "手写签名+短信签约",
        "手写识别签名+短信签约",
        // "手写签名+人脸识别签约",
        "手写识别签名+人脸识别签约"
      ], // 签署方式列表
      inpArr: []
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
    title() {
      const data = this.action.data;
      // 有回显的值
      if (data && Object.keys(data).length) {
        this.templateForm.customerId = data.customerId; // 客户id
        this.templateForm.customerName = data.customerName; // 客户姓名
        this.templateForm.signPhone = data.telephone; // 手机号
      }
      return this.action.type === "update" ? "编辑协议模版" : "协议签署";
    }
  },
  props: {
    show: Boolean,
    action: {
      type: Object,
      default: () => {
        return {
          type: "save",
          id: "",
          data: {}
        };
      }
    }
  },
  mounted() {
    this.show ? (this.dialogVisible = true) : (this.dialogVisible = false);
    // 获取模板列表
    getTemplateAllList({ status: 1 }).then(res => {
      if (res && res.code === 0) {
        this.systemList = res.data;
      }
    });
  },
  methods: {
    tabClick: debounce(500, async function (type){
      if (this.tabIndex != 3 || type === "down") {
        if (type === "down") {
          // 返回 返回不校验数据是否完整
          this.tabIndex--;
        } else if (type === "up") {
          // 下一步 校验数据是否完整
          if (this.tabIndex == 1) {
            if (
              !(
                this.templateForm.signPhone &&
                this.templateForm.signUserName &&
                this.templateForm.idCard
              )
            ) {
              this.$message.error("请将数据填写完整");
              return;
            } else if (this.templateForm.signPhone.length != 11) {
              this.$message.error("手机号长度不符合规范");
              return;
            }
            // 进行三要素验证
            const resp = await personAuth({
              signUserName: this.templateForm.signUserName,
              idCard: this.templateForm.idCard,
              telephone: this.templateForm.signPhone
            });
            if (resp && resp.code === 0) {

            } else {
              return;
            }
          } else if (this.tabIndex == 2) {
            let temp = false;
            for (const key in this.templateForm.params) {
              if (!this.templateForm.params[key]) {
                temp = true;
              }
            }
            if (temp || !this.templateForm.templateName) {
              this.$message.error("请将数据填写完整");
              return;
            }
          }
          this.tabIndex++;
        }
      } else if (this.tabIndex === 3 && type === "up") {
        if (!this.templateForm.signType) {
          this.$message.error("请选择签署方式");
          return;
        }
        // 提交
        this.submitTemp();
      }
    }),

    // 保存模板
    submitTemp() {
      let request = addSign;
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      request(this.templateForm)
        .then(res => {
          loading.close();
          this.$message.success("发起成功，签署链接已复制！");
          setTimeout(() => {
            this.handleClose();
            window.open(res.data.url, "_blank");
          }, 2000);
          // 保存成功
          this.$emit("save-success", {
            type: "signature"
          });
          copyText(res.data.url);
        })
        .catch(() => {
          loading.close();
        });
    },

    paramsChange() {
      this.$forceUpdate();
    },

    // 模板更改
    templateChange() {
      this.systemList.forEach((item, index) => {
        if (this.templateForm.templateId === item.templateId) {
          this.templateForm.templateName = item.templateName;
          // 获取模板详情
          getTemplateInfo({
            templateId: item.templateId
          }).then(res => {
            if (res && res.code === 0) {
              this.inpList = res.data.model.signerList;
              this.templateForm.params = {};
              this.inpArr = [];
              res.data.model.paramsList.forEach(item => {
                // this.templateForm.params[item.paramsKey] = "";
                this.$set(this.templateForm.params, item.paramsKey, "");
                this.inpArr.push(item.paramsType);
              });
            }
          });
        }
      });
    },

    handleClose() {
      this.$emit("close");
      this.dialogVisible = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.tab-wrap {
  width: 722px;
  margin-bottom: 30px;
  .tab_item_one {
    width: 238px;
    height: 40px;
    color: #fff;
    text-align: center;
    line-height: 40px;
    background-color: #eaf3ff;
    position: relative;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }
  .tab_item_one::after {
    content: " ";
    display: block;
    position: absolute;
    right: -30px;
    top: 0;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-right: 10px solid transparent;
    border-left: 20px solid #0066f9;
    border-bottom: 20px solid transparent;
    z-index: 1;
  }
  .tab_item_two {
    width: 238px;
    height: 40px;
    color: #7ab3ff;
    text-align: center;
    line-height: 40px;
    background-color: #eaf3ff;
    position: relative;
  }
  .tab_item_two::before {
    content: " ";
    display: block;
    position: absolute;
    left: 0px;
    top: 0;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-right: 10px solid transparent;
    border-left: 20px solid #fff;
    border-bottom: 20px solid transparent;
  }
  .tab_item_two::after {
    content: " ";
    display: block;
    position: absolute;
    right: -30px;
    top: 0;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-right: 10px solid transparent;
    border-left: 20px solid #eaf3ff;
    border-bottom: 20px solid transparent;
    z-index: 1;
  }
  .tab_item_three {
    width: 238px;
    height: 40px;
    color: #7ab3ff;
    text-align: center;
    line-height: 40px;
    background-color: #eaf3ff;
    position: relative;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
  }
  .tab_item_three::before {
    content: " ";
    display: block;
    position: absolute;
    left: 0px;
    top: 0;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-right: 10px solid transparent;
    border-left: 20px solid #fff;
    border-bottom: 20px solid transparent;
  }

  .tab_item_active__is {
    background-color: #0066f9;
    color: #fff;
  }
  .tab_item_active__is::after {
    border-left: 20px solid #0066f9;
  }
}

.step-section {
  min-height: 300px;
  position: relative;
  margin-bottom: 24px;
  /deep/ .el-loading-spinner {
    top: 45%;
    .el-icon-loading {
      font-size: 40px;
      color: #999;
    }

    .el-loading-text {
      color: #333;
      margin: 8px 0;
    }
  }

  &__tips {
    margin-top: 10px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ff6161;
  }
}

.sections {
  font-size: 14px;
  color: #333;
  margin-top: 20px;

  &__title {
    color: #666;
    font-weight: 600;
  }

  &__tips {
    padding-left: 30px;
    margin: 8px 0 15px;
    color: #999;
    font-size: 12px;
    line-height: 1.4;
  }

  .download {
    cursor: pointer;
    color: #2362fb;
  }

  .delete-btn {
    position: absolute;
    right: -20px;
  }

  .select-item {
    margin-top: 24px;
  }
  .select-item:first-child {
    margin: 0;
  }
}
.add-btn {
  margin: 16px 0;
  height: 32px;
  line-height: 32px;
  border: 1px dashed #0068f7;
  color: #0066f9;
  border-radius: 4px;
  text-align: center;
}
.three-sections {
  .content {
    padding-bottom: 15px;
  }
  .content:last-child {
    border-bottom: 1px solid #e5e5e5;
  }
}

.content {
  padding: 10px 0px 0px 0px;
  .el-select {
    width: 400px;
  }
  .user-cell {
    width: 400px;
  }
}
#importInputFile {
  display: none;
}
/deep/ .el-dialog__body {
  padding: 0 25px 0px 25px;
}
</style>
